<template>
    <view class="container">
        <view class="user-section">
            <view class="bg"></view>
            <view class="user-info-box">
                <view style="width: 20%" class="portrait-box" @click="goLogin">
                    <image class="portrait" :src="image_url"></image>
                </view>
                <view style="width: 50%;text-align: left;margin-left: 6px">
                    <view class="info-box" @click="goLogin" style="margin-top: 8px">
                        <text v-if="relation_id" class="username" style="color: #f7d680">{{mobile}}</text>
                        <text v-else="mobile" class="username">{{mobile?mobile:'游客'}}</text>
                    </view>
                </view>
                <view v-if="relation_id" style="text-align: center;margin-right:10px;margin-top: 8px;width: 30%">
                    <view style="color: #f7d680;margin-bottom: 6px">
                        <text style="font-size: 12px">￥</text>
                        <text style="font-size: 22px;margin-left: 2px">{{moneys}}</text>
                    </view>
                    <view @click="getMoneys"
                          style="font-size: 12px;color:#36343c;background: #f7d680;padding: 2px 10px;border-radius: 12px">
                        立即提现
                    </view>
                </view>
            </view>
            <view class="vip-card-box">
                <view class="b-btn" @click="copyTklWenAn">
                    {{des}}
                </view>
                <view class="tit" v-if="!relation_id">
                    <text class="yticon icon-iLinkapp-" style="margin-right: 2px;"></text>
                </view>
                <view class="tit" v-else>
                    VIP {{dengji}}
                    <text style="margin-left: 12px">{{dengjides}}</text>
                    <text @click="shengJiMethod" v-if="grade!='0.7'"
                          style="font-size: 12px;margin-left: 8px;color:#36343c;background: #f7d680;padding: 2px 10px;border-radius: 12px">
                        升级
                    </text>
                </view>
            </view>
        </view>

        <view class="cover-container">
            <view style="background: white;border-radius: 8px">
                <list-cell icon="icon-iLinkapp-" iconColor="#FC3F78" title="全部订单明细"
                           @eventClick="navToLogins('/pages/order/order?state=0')"></list-cell>
                <image class="arc" src="/static/arc.png"></image>
                <view class="tj-sction" style="margin-top: -8px">
                </view>
            </view>
          
            <view class="history-section icon">
                <!--  #ifndef APP-PLUS -->
                <view class="sec-header" @click="navTo('/pages/subsystem/member_history')">
                    <text class="yticon icon-lishijilu"></text>
                    <text>浏览历史</text>
                </view>
                <scroll-view scroll-x class="h-list">
                    <text v-for="(item,index) in couponlist" :key="index">
                        <image @click="navToOrder(item.itemid)" :src="item.itempic+'_310x310.jpg'"
                               mode="aspectFill"></image>
                    </text>
                </scroll-view>
                <!--  #endif -->
                <!--  #ifdef APP-PLUS -->
                <list-cell icon="icon-lishijilu" iconColor="#5eba8f" title="浏览历史"
                           @eventClick="navTo('/pages/subsystem/member_history')"></list-cell>
                <!--  #endif -->
                <list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="我的收藏"
                           @eventClick="navTo('/pages/subsystem/member_like')"></list-cell>

                <list-cell icon="icon-shezhi1" iconColor="#e07472" title="设置" border=""
                           @eventClick="navTo('/pages/set/set')"></list-cell>
            </view>
        </view>


    </view>
</template>
<script>
    import listCell from '../../components/mix-list-cell';

    // const plug = uni.requireNativePlugin('Html5app-Baichuan');
    export default {
        components: {
            listCell
        },
        data() {
            return {
                couponlist: [],
                des: '会员申请',
                coverTransform: 'translateY(0px)',
                coverTransition: '0s',
                mobile: '',
                relation_id: '',
                jifen: '0',
                image_url: '/static/logo.png',
                gender: '',
                moneyAll: '0',
                moneys: '0',
                jiesuan: '0',
                grade: '',
                phone: '',
                dengji: 0,
                dengjides: '',
                lastjiesuan: '0',
                lastMoneyAll: '0',
                orderNum: '0',
                orderMonthNum: '0',
                totalMoney: '0',
                isInvitation: 0,
                moving: false,
                footprintKey: 'orange-sqx-footprint',
            }
        },

        onLoad() {
            let userId = this.$queue.getData("userId");
            if (userId) {
                this.getUserInfo(userId)
            }
            //#ifdef H5
            if (window.location.href.indexOf("?invitation=") !== -1 || window.location.href.indexOf("&invitation=") !== -1) {
                if (window.location.href.indexOf("?invitation=") !== -1) {
                    this.$queue.setData("relation", window.location.href.split("?invitation=")[1].split("&")[0])
                } else {
                    this.invitation = window.location.href.split("&invitation=")[1].split("&")[0];
                    this.$queue.setData("relation", window.location.href.split("&invitation=")[1].split("&")[0])
                }
            }
            //#endif
        },
        onShow() {
            let mobile = this.$queue.getData("nickName");
            this.phone = this.$queue.getData("mobile");
            let image_url = this.$queue.getData("image_url");
            let gender = this.$queue.getData("gender");

            if (mobile && mobile !== 'undefined') {
                this.mobile = mobile;
            } else {
                this.mobile = '';
            }
            if (image_url && image_url !== 'undefined') {
                this.image_url = image_url;
            } else {
                this.image_url = '/static/img/common/logo.jpg'
            }
            if (gender) {
                this.gender = gender;
            }
            let relation_id = this.$queue.getData("relation_id");
            if (relation_id && relation_id !== 'undefined') {
                this.des = '我的特权';
                this.relation_id = relation_id;
            } else {
                this.des = '会员申请';
                this.relation_id = '';
            }
            let userId = this.$queue.getData("userId");
            if (userId) {
				
			} else {
                this.totalMoney = '0';
                this.orderNum = '0';
                this.moneys = '0';
                this.moneyAll = '0';
                this.lastjiesuan = '0';
                this.lastMoneyAll = '0';
                this.orderMonthNum = '0';
                this.jiesuan = '0';
                this.jifen = '0'
            }

        },

        methods: {
            //升级规则弹框
            shengJiMethod() {
				
			},
            //邀请码复制
            copyHref() {
                uni.setClipboardData({
                    data: this.relation_id,
                    success: (r => {
                        this.$queue.showToast("邀请码复制成功")
                    }),
                })
            },
            //获取用户信息
            getUserInfo(userId) {
                this.$Request.getT("/user/" + userId).then(res => {
                    if (res.status === 0) {
                        if (res.data.orderJifen) {
                            this.jifen = parseFloat(res.data.orderJifen).toFixed(0);
                        }
                        this.$queue.setData("image_url", res.data.image_url);
                        this.$queue.setData("relation_id", res.data.relationId);
                        this.$queue.setData("nickName", res.data.nickName);
                        this.$queue.setData("isInvitation", res.data.isInvitation);
                        let grade = res.data.grade;
                        if (grade == 0.3) {
                            this.dengji = 0;
                            this.dengjides = "还可升级10级";
                        } else if (grade == 0.34) {
                            this.dengji = 1;
                            this.dengjides = "还可升级9级";
                        } else if (grade == 0.38) {
                            this.dengji = 2;
                            this.dengjides = "还可升级8级";
                        } else if (grade == 0.42) {
                            this.dengji = 3;
                            this.dengjides = "还可升级7级";
                        } else if (grade == 0.46) {
                            this.dengji = 4;
                            this.dengjides = "还可升级6级";
                        } else if (grade == 0.50) {
                            this.dengji = 5;
                            this.dengjides = "还可升级5级";
                        } else if (grade == 0.54) {
                            this.dengji = 6;
                            this.dengjides = "还可升级4级";
                        } else if (grade == 0.58) {
                            this.dengji = 7;
                            this.dengjides = "还可升级3级";
                        } else if (grade == 0.62) {
                            this.dengji = 8;
                            this.dengjides = "还可升级2级";
                        } else if (grade == 0.66) {
                            this.dengji = 9;
                            this.dengjides = "还可升级1级";
                        } else if (grade == 0.7) {
                            this.dengji = 10;
                            this.dengjides = "已到达最高等级";
                        }
                        this.grade = res.data.grade;
                        this.isInvitation = res.data.isInvitation;
                        this.$queue.setData("relation", res.data.invitation);
                        this.$queue.setData("gender", parseInt(res.data.gender));
                        this.gender = parseInt(res.data.gender);
                        if (res.data.image_url) {
                            this.image_url = res.data.image_url;
                        } else {
                            this.image_url = '/static/img/common/logo.jpg'
                        }
                        if (res.data.relationId) {
                            this.relation_id = res.data.relationId;
                            this.des = '我的特权';
                        } else {
                            this.relation_id = '';
                            this.des = '会员申请';
                        }
                        if (res.data.nickName) {
                            this.mobile = res.data.nickName;
                        } else {
                            this.mobile = res.data.phone;
                        }
                    } else {
                        this.$queue.logout();
                        uni.showModal({
                            title: '用户信息提示',
                            content: '本地用户信息失效需要重新授权登录',
                            showCancel: false,
                            success: (e) => {
                                //#ifdef H5
                                if (e.confirm) {
                                    window.location.reload();
                                } else {
                                    window.location.reload();
                                }
                                //#endif
                                //#ifndef H5
                                this.navTo('/pages/public/login')
                                //#endif
                            },
                        });
                    }
                });
            },

            //会员申请弹框
            copyTklWenAn: function () {
                let relation_id = this.$queue.getData("relation_id");
                let token = this.$queue.getData("token");
                let userId = this.$queue.getData("userId");
                if (!token) {
                    this.goLoginInfo();
                } else {
                    if (!relation_id) {
                        this.navTo('/pages/member/publisher?uid=' + userId + '&token=' + token)
                    } else {
                        uni.showModal({
                            showCancel: false,
                            title: '我的特权',
                            content: '1、享受VIP ' + this.dengji + '级返现！\n2、购买商品可享受省钱 +返现！\n3、会员分享商品给好友购买拿返现金额！\n4、更多会员特权我们将陆续上线！\n\n注：VIP越高返现越高哦'
                        });
                    }
                }
            },
            //获取付款收入查询
            getMoney() {
				
			},
            //本月结算收入弹框
            benyuejiesuan() {},
            //本月付款收入说明弹框
            benyuefukuan() {},
            //今日订单说明弹框
            jinridingdan() {},
            /**
             * 统一跳转接口,拦截未登录路由
             * navigator标签现在默认没有转场动画，所以用view
             */
            navTo(url) {
                uni.navigateTo({
                    url
                })

            },
            //订单详情跳转
            navToOrder(itemid) {
                let relation_id = this.$queue.getData("relation_id");
                if (relation_id && relation_id !== 'undefined') {
                    uni.navigateTo({
                        url: "/pages/detail/goodsinfo?itemid=" + itemid + "&relation_id=" + relation_id,
                    })
                } else {
                    uni.navigateTo({
                        url: "/pages/detail/goodsinfo?itemid=" + itemid,
                    })
                }
            },
            /**
             * 统一跳转接口,拦截未登录路由
             * navigator标签现在默认没有转场动画，所以用view
             */
            navToLogin(url) {
                let token = this.$queue.getData("token");
                let mobile = this.$queue.getData("mobile");
                if (token) {
                    if (mobile) {
                        uni.navigateTo({
                            url
                        })
                    } else {
                        uni.navigateTo({
                            url: '/pages/public/mobile'
                        })
                    }
                } else {
                    this.goLoginInfo();
                }

            },
            //统一登录跳转
            goLoginInfo() {
                this.$queue.setData("href", '/pages/member/user');
                //#ifdef H5
                uni.navigateTo({
                    url: '/pages/member/register'
                });
                //#endif
                //#ifndef H5
                uni.navigateTo({
                    url: '/pages/public/login'
                });
                //#endif
            },
            navToLogins(url) {
                let token = this.$queue.getData("token");
                if (token) {
                    let relation_id = this.$queue.getData("relation_id");
                    if (relation_id) {
                        uni.navigateTo({
                            url
                        })
                    } else {
                        uni.showModal({
                            showCancel: false,
                            title: '温馨提示',
                            content: '此功能为会员专享功能\n申请成为会员后可使用',
                        });
                    }
                } else {
                    this.goLoginInfo();
                }

            },

            goLogin(url) {
                let token = this.$queue.getData("token");
                if (!token) {
                    this.goLoginInfo();
                }

            },

        }
    }
</script>
<style lang='scss'>
    %flex-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    %section {
        display: flex;
        justify-content: space-around;
        align-content: center;
        background: #fff;
        border-radius: 10px;
    }

    .tixian {
        background: -moz-linear-gradient(left, #F15B6C, #FF6DB2 100%);
        background: -webkit-gradient(linear, left top, left right, color-stop(0, #F15B6C), color-stop(100%, #FF6DB2));
        background: -webkit-linear-gradient(left, #F15B6C 0, #FF6DB2 100%);
        background: -o-linear-gradient(left, #F15B6C 0, #FF6DB2 100%);
        background: -ms-linear-gradient(left, #F15B6C 0, #FF6DB2 100%);
        background: linear-gradient(to left, #F15B6C 0, #FF6DB2 100%);
    }

    .user-section {
        margin-top: -10px;
        height: 300px;
        padding: 50px 15px 0;
        position: relative;

        .bg {
            background: -moz-linear-gradient(left, #F15B6C, #FF6DB2 100%);
            background: -webkit-gradient(linear, left top, left right, color-stop(0, #F15B6C), color-stop(100%, #FF6DB2));
            background: -webkit-linear-gradient(left, #F15B6C 0, #FF6DB2 100%);
            background: -o-linear-gradient(left, #F15B6C 0, #FF6DB2 100%);
            background: -ms-linear-gradient(left, #F15B6C 0, #FF6DB2 100%);
            background: linear-gradient(to left, #F15B6C 0, #FF6DB2 100%);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            filter: blur(1px);
        }
    }

    .user-info-box {
        height: 100px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;

        .portrait {
            width: 70px;
            height: 70px;
            /*border: 5px solid #fff;*/
            border-radius: 50%;
        }

        .username {
            font-size: 16px;
            color: #f2f2f2;
            margin-top: 16px;
            margin-left: 10px;
        }

        .username1 {
            font-size: 14px;
            color: whitesmoke;
            margin-top: 16px;
            margin-left: 10px;
        }
    }

    .vip-card-box {
        display: flex;
        flex-direction: column;
        color: #f7d680;
        height: 180px;
        background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
        border-radius: 12px 16px 0 0;
        overflow: hidden;
        position: relative;
        padding: 20px 24px;

        .card-bg {
            position: absolute;
            top: 20px;
            right: 0;
            width: 220px;
            height: 160px;
        }

        .b-btn {
            position: absolute;
            right: 10px;
            top: 16px;
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #36343c;
            border-radius: 20px;
            background: linear-gradient(left, #f9e6af, #ffd465);
            z-index: 1;
        }

        .tit {
            font-size: 14px;
            color: #f7d680;
            margin-bottom: 16px;
        }

    }

    .cover-container {
        background: $page-color-base;
        margin-top: -80px;
        padding: 0 18px;
        position: relative;
        background: #f5f5f5;
        padding-bottom: 12px;

        .arc {
            position: absolute;
            left: 0;
            top: -17px;
            width: 100%;
            height: 22px;
        }
    }

    .tj-sction {
        @extend %section;

        .tj-item {
            @extend %flex-center;
            flex-direction: column;
            height: 80px;
            font-size: $font-sm;
            color: #75787d;
        }

        .num {
            font-size: $font-lg;
            color: $font-color-dark;
            margin-bottom: 8px;
        }
    }

    .order-section {
        @extend %section;
        padding: 16px 0;
        margin-top: 12px;

        .order-item {
            @extend %flex-center;
            width: 70px;
            height: 70px;
            border-radius: 10px;
            font-size: $font-sm;
            color: $font-color-dark;
        }

        .yticon {
            font-size: 24px;
            margin-bottom: 12px;
            color: #fa436a;
        }

        .icon-shouhoutuikuan {
            font-size: 22px;
        }
    }

    .history-section {
        padding: 16px 0 0;
        margin-top: 12px;
        background: #fff;
        border-radius: 10px;

        .sec-header {
            display: flex;
            align-items: center;
            font-size: $font-base;
            color: $font-color-dark;
            line-height: 22px;
            margin-left: 15px;

            .yticon {
                font-size: 22px;
                color: #5eba8f;
                margin-right: 10px;
                line-height: 20px;
            }
        }

        .h-list {
            white-space: nowrap;
            padding: 15px 15px 0;

            image {
                display: inline-block;
                width: 100px;
                height: 100px;
                margin-right: 12px;
                border-radius: 10px;
            }
        }
    }
</style>
